<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>自定义指令</h1>
    <div v-text="msg"></div>

    <div v-text-danger="msg"></div>
    用户名: <input type="text" v-bind:value="username">
<!--
    需要一个指令，可以和v-bind 指令完成相同的功能，同时将该元素的父级元素的背景色设置为蓝色
-->
    用户名: <input type="text" v-bind-blue="username">
</div>


<div id="app2">
    <div v-text-danger="msg"></div>
    <div>
        用户名: <input type="text" v-bind-blue="username">
    </div>
</div>

<script>
    // 对于自定义指令来说，函数体当作的 this 是window，而不是 Vue实例
    // 定义全局的指令
    // 函数式
    Vue.directive('text-danger',function (element,binding){
        console.log(this)
        element.innerText = binding.value
        element.style.color = 'red'

    })


    // 对象式
    Vue.directive('bind-blue',{
        bind(element,binding){
            element.value = binding.value
            console.log(this)

        },
        // 元素被插入到页面之后，这个函数自动被调用
        inserted(element,binding){
            element.parentNode.style.backgroundColor = 'skyblue'
            console.log(this)
        },
        // 当模板重新解析的时候，这个函数会被自动调用
        update(element,binding){
            element.value = binding.value
            console.log(this)
        }

    })


    const vm2 = new Vue({
        el:'#app2',
        data:{
            msg:'欢迎学习Vue框架',
            username:'jackson'
        }
    })


    const vm = new Vue({
        el:'#app',
        data:{
            msg:'自定义指令',
            username:'jackson'
        },
        directives: {
            // 指令1
            // 指令2
            // 指令3
            // 关于指令的名字:1 v-不需要写，2.Vue官方建议指令的名字要全部小写，如果是多个单词组成的话，请使用“-”进行链接
            // 这个回调函数的执行时机包括两个：第一个：标签和指令第一次绑定的时候。第二个：模板被重新解析的时候
            // 这个回调函数有两个参数：第一个参数是真实的dom元素，第二个参数是标签与指令之间绑定关系的对象
            // 这种方式属于函数式方式
            // 'text-danger':function (x,y) {
            // console.log(x)
            // console.log(y)
        // }
            'text-danger':function (element,binding) {
                console.log('@')
                element.innerText = binding.value
                element.style.color = 'red'
            },
          /*  'bind-blue':function (element,binding) {
                console.log(element)
                // 为什么是Null,原因是这个函数在执行的时候，指令和元素完成了绑定，但是只是在内存当作完成了绑定，
                // 元素还没有被插入到页面当中
                // console.log(element,parentNode)
                element.value = binding.value
                element.parentNode.style.backgroundColor='blue'

            }*/

            // 对象式
            /*'bind-blue':{
                // 这个对象中三个方法的名字不能随便写
                // 这个三个函数将来都会被自动调用
                // 元素与指令初次绑定的时候，自动调用 bind
                // 注意：在特定的时间节点调用特定的函数，这种被调用的函数被称之为函数
                bind(element,binding){
                    element.value = binding.value

                },
                // 元素被插入到页面之后，这个函数自动被调用
                inserted(element,binding){
                    element.parentNode.style.backgroundColor = 'blue'
                },
                // 当模板重新解析的时候，这个函数会被自动调用
                update(element,binding){
                    element.value = binding.value
                }
            }*/
        }
    })
</script>

</body>
</html>